<template>
 <div class="coupon">
  <img class="bg" src="@/assets/image/coupons-image/coupon.png" alt="">
  <div class="amount">{{this.coupon.description}}</div>
  <div class="exchange">
    <span>{{this.coupon.score}}</span> 
    <span>积分兑换</span>
  </div>
 </div>
</template>

<script>
 export default {
  name: '' ,
  props:['coupon'],
  data () {
  return {
    }
  }
}

</script>
<style scope lang="less">
.coupon{
  .bg{
    z-index: -10;
  }
  .amount{
    position: relative;
    bottom: 200px;
    font-size: 35px;
    color: #fff;
    font-family: LiSu;
  }
  .exchange{
    position: relative;
    bottom: 95px;
    font-size: 16px;
    color: #3D7288;
    cursor: default;
    align-items: center;
    &:hover{
      color: #67C23A;
    }
  }
}

</style>